From 4ddf4eab79c47cf3f9e6cea60c69ebef631ba1fc Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 30 Dec 2023 00:33:14 -0800
Subject: feat(badges): manual time set

---
 src/routes/user/[user]/badges/+page.svelte | 40 ++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

(limited to 'src/routes/user/[user]')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 8a15425c..7843fed3 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -42,6 +42,7 @@
 		const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
 		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
 		const description = document.querySelector('input[name="description"]') as HTMLInputElement;
+		const time = document.querySelector('input[type="datetime-local"]') as HTMLInputElement;
 
 		if (!imageURL.value || !activityURL.value) {
 			error = 'Fields cannot be empty.';
@@ -58,7 +59,11 @@
 		fetch(
 			`/api/badges?image=${encodeURIComponent(imageURL.value)}&post=${encodeURIComponent(
 				activityURL.value
-			)}&description=${encodeURIComponent(description.value)}`,
+			)}${
+				description.value.length > 0 ? `&description=${encodeURIComponent(description.value)}` : ''
+			}${
+				time.valueAsDate ? `&time=${encodeURIComponent(dateToDatabaseTime(time.valueAsDate))}` : ''
+			}`,
 			{
 				method: 'PUT'
 			}
@@ -151,6 +156,15 @@
 			element.classList.remove('invert');
 		}
 	};
+
+	const databaseTimeToDate = (time: string) =>
+		new Date(new Date(time + 'Z').getTime() + new Date(time + 'Z').getTimezoneOffset() * 60000);
+
+	const dateToDatabaseTime = (date: Date) =>
+		date
+			.toISOString()
+			.replace('T', ' ')
+			.replace(/\.\d+Z$/, '');
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -214,6 +228,8 @@
 							minlength="1"
 							maxlength="1000"
 						/>
+						<input type="datetime-local" />
+						<small>Must be full date, defaults to now if empty</small>
 						<a href={`#`} on:click={submitBadge}>Add Badge</a>
 					</p>
 				{/if}
@@ -226,12 +242,26 @@
 					{:else}
 						{#each badges as badge}
 							{#if editMode}
-								<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
-									<img src={badge.image} alt={badge.description} title={badge.description} />
+								<a
+									href={`#`}
+									on:click={() => removeBadge(badge)}
+									id={`badge-${badge.id}`}
+									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
+										badge.description ? `\n${badge.description}` : ''
+									}`}
+								>
+									<img src={badge.image} alt={badge.description} />
 								</a>
 							{:else}
-								<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
-									<img src={badge.image} alt={badge.description} title={badge.description} />
+								<a
+									href={badge.post}
+									target="_blank"
+									id={`badge-${badge.id}`}
+									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
+										badge.description ? `\n${badge.description}` : ''
+									}`}
+								>
+									<img src={badge.image} alt={badge.description} />
 								</a>
 							{/if}
 						{/each}
-- 
cgit v1.2.3